import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, RichText, Image, Text } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { QRCode } from 'taro-code';
import html2canvas from 'html2canvas';
import { getRuntime, ServerHost, subtime } from "../../utils/common";
import signStyleSheet from "./sign_styles";

import icon_80 from "../../assets/img/icon_80.png";
import bg_15 from "../../assets/img/bg_15.png";
import bg_16 from "../../assets/img/bg_16.png";
import icon_81 from "../../assets/img/icon_81.png";
import icon_82 from "../../assets/img/icon_82.png";
var _styleSheet = signStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let Company = class Company extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: false,
      info: {
        pictureUrl: '',
        article: ''
      },
      userInfo: {},
      signRecord: {},
      sign: {},
      date: {},
      shareImgSrc: '',
      isShowShare: false
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '早起打卡' });
    this.setState({ userInfo: getRuntime().getUserInfo() });
    this.sign();
    this.getUserSignRecord();
    this.getDate();
    this.getSignedArticle();
  }
  componentDidShow() {
    this.setState({ userInfo: getRuntime().getUserInfo() });
  }
  // 签到记录
  getUserSignRecord() {
    let { SignStore } = this.props.stores;
    SignStore.getUserSignRecord({
      callback: res => {
        if (res.isTodaySign) {
          getRuntime().showToast('您今天已经签过到啦~');
        }
        this.setState({
          signRecord: toJS(res)
        });
      }
    });
  }
  // 打卡
  sign() {
    let { SignStore } = this.props.stores;
    SignStore.sign({
      callback: res => {
        this.setState({
          sign: res,
          isShow: true
        }, () => {
          this.getUserSignRecord();
        });
      }
    });
  }
  getSignedArticle() {
    let { SignStore } = this.props.stores;
    SignStore.getSignedArticle({
      callback: res => {
        this.setState({
          info: toJS(res)
        });
      }
    });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  close() {
    this.setState({
      isShow: false
    });
  }
  getDate() {
    let now = new Date();
    let month = now.getMonth();
    let monthName;
    switch (month + 1) {
      case 1:
        {
          monthName = '一月';
          break;
        }
      case 2:
        {
          monthName = '二月';
          break;
        }
      case 3:
        {
          monthName = '三月';
          break;
        }
      case 4:
        {
          monthName = '四月';
          break;
        }
      case 5:
        {
          monthName = '五月';
          break;
        }
      case 6:
        {
          monthName = '六月';
          break;
        }
      case 7:
        {
          monthName = '七月';
          break;
        }
      case 8:
        {
          monthName = '八月';
          break;
        }
      case 9:
        {
          monthName = '九月';
          break;
        }
      case 10:
        {
          monthName = '十月';
          break;
        }
      case 11:
        {
          monthName = '十一月';
          break;
        }
      case 12:
        {
          monthName = '十二月';
          break;
        }
    }
    let day = now.getDate();
    this.setState({
      date: { monthName, day }
    });
  }
  html2Canvas() {
    let htmlCanvas = document.getElementById('sign_canvas');
    let width = htmlCanvas.offsetWidth;
    let height = htmlCanvas.offsetHeight;
    let opts = {
      logging: true,
      // allowTaint: true, //
      tainttest: true,
      useCORS: true,
      background: "#fff",
      width,
      height
    };
    Taro.showLoading({ title: '海报生成中...' });
    html2canvas(htmlCanvas, opts).then(canvas => {
      Taro.hideLoading();
      let imgSrc = canvas.toDataURL('image/jpeg');
      this.setState({ shareImgSrc: imgSrc, isShowShare: true });
    });
  }
  closeShare(e) {
    e.stopPropagation();
    this.setState({ isShowShare: false });
  }
  render() {
    let { isShow, isShowShare, shareImgSrc, info, userInfo, date, signRecord } = this.state;
    return <View style={_styleSheet["my-my_sign"]}>
        <View id="sign_canvas" onClick={this.html2Canvas.bind(this)} style={_styleSheet["sign_canvas"]}>
          {info && info.pictureUrl && <Image src={info.pictureUrl} style={_styleSheet["header"]} />}
          {!info.pictureUrl && <Image src={bg_15} style={_styleSheet["header"]} />}
          <View style={_styleSheet["date"]}>
            <Text style={_styleSheet["month"]}>{date.monthName}</Text>
            <Text style={_styleSheet["today"]}>{date.day}</Text>
          </View>

          <View style={_styleSheet["list-21"]}>
            <View style={_styleSheet["list-21-item"]}>
              <Image src={userInfo.avatar} style={_styleSheet["img"]} />
              <View style={_styleSheet["info"]}>
                <View style={_styleSheet["list-title"]}>
                  <View>{userInfo.name}</View>
                </View>
                <View style={_styleSheet["list-desc"]}>打卡时间:  {subtime(signRecord.signTime)}</View>
                <View style={_styleSheet["list-info"]}>
                  成为更好的自己，第 <Text style={_styleSheet["day"]}>{signRecord.signDays + 1}</Text> 天
                </View>
              </View>
              <View style={[_styleSheet["r"], { display: 'none' }]}>
                <Image src={icon_80} style={_styleSheet["img-play"]} />
              </View>
            </View>
            
            
            <View style={_styleSheet["img-code"]}>
              <QRCode text={ServerHost + '/m/#/pages/login/register_step_one?invitationCode=' + userInfo.id} size={80} />
              <View>建务通</View>
            </View>
          </View>

          <View style={_styleSheet["famous-wrap"]}>
            <Image src={icon_81} style={_styleSheet["famous-icon"]} />
            <View style={[_styleSheet["famous-desc"], _styleSheet["rich-text"]]}>
              <RichText nodes={info && info['article']} />
            </View>
          </View>
        </View>

        {isShowShare && <View onClick={this.closeShare.bind(this)} style={_styleSheet["share-img"]}>
           <Image src={shareImgSrc} style={[_styleSheet["img"], _styleSheet["img-active"]]} />
           <View style={_styleSheet["tipsText"]}>长按保存图片、识别二维码</View>
        </View>}

        <View onClick={this.close.bind(this)} style={_getStyle(isShow ? 'sign-success sign-show' : 'sign-success')}>
         <View style={_styleSheet["sign-success-content"]}>
           <Image src={bg_16} style={_styleSheet["success-bg"]} />
           <View style={_styleSheet["info"]}>
             <View style={_styleSheet["title"]}>打卡成功</View>
             <View style={_styleSheet["integral"]}><Text style={_styleSheet["count"]}>+{signRecord.signPoint} </Text>积分</View>
             <View style={_styleSheet["desc"]}>打卡成功,明天继续来哦~</View>
           </View>
           <Image src={icon_82} onClick={this.close.bind(this)} style={_styleSheet["btn-close"]} />
         </View>
        </View>

        <View onClick={this.closeShare.bind(this)} style={_styleSheet["product-img"]}>
          <View style={_styleSheet["tipsText"]}>点击二维码生成海报</View>
        </View>
      </View>;
  }
};
Company = tslib_1.__decorate([inject("stores"), observer], Company);
export default Company;